<template>
	<div>
		<header id="header" class="mui-bar mui-bar-nav">
			<i style="color: #fff;" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" v-on:click="back"></i>
			<h1 class="mui-title" style="color: #fff;">资讯</h1>
		</header>
		<div class="mui-content">
			<div style="padding: 14px 10px;" class="header">
				<div id="segmentedControl" class="mui-segmented-control">
					<router-link class="mui-control-item" to="/consult">
						热点动态
					</router-link>
					<router-link class="mui-control-item mui-active" to="/item2">
						市场动态
					</router-link>
					<router-link class="mui-control-item" to="/item3">
						楼盘分析
					</router-link>
					<router-link class="mui-control-item" to="/item4">
						楼市点评
					</router-link>
				</div>
			</div>
			<div class="contain">
				<div id="item2" class="mui-control-content mui-active">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-media">
							<a href="javascript:;">
								<img class="mui-media-object mui-pull-left" src="static/images/lp0.png">
								<div class="mui-media-body">
									<h4 class="mui-ellipsis-2" style="font-weight: normal;">沪指重新站上3000点,房地产版迎来最佳配置 时点.</h4>
									<p class="mui-ellipsis-2">沪指重新站上3000点,房地产版迎来最佳配置 时点.</p>
								</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media">
							<a href="javascript:;">
								<img class="mui-media-object mui-pull-left" src="static/images/lp0.png">
								<div class="mui-media-body">
									<h4 class="mui-ellipsis-2" style="font-weight: normal;">沪指重新站上3000点,房地产版迎来最佳配置 时点.</h4>
									<p class="mui-ellipsis-2">沪指重新站上3000点,房地产版迎来最佳配置 时点.</p>
								</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media">
							<a href="javascript:;" class="">
								<img class="mui-media-object mui-pull-left" src="static/images/lp0.png">
								<div class="mui-media-body">
									<h4 class="mui-ellipsis-2" style="font-weight: normal;">沪指重新站上3000点,房地产版迎来最佳配置 时点.</h4>
									<p class="mui-ellipsis-2">沪指重新站上3000点,房地产版迎来最佳配置 时点.</p>
								</div>
							</a>
						</li>

					</ul>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				msg: 'Welcome to Your Vue.js App'
			}
		},
		mounted: function() {

		},
		methods:{
			back() {
				this.$router.go(-1); //返回上一层
			},
		}
	}
</script>
<style scoped>
	.mui-bar-nav {
		position: fixed;
		top: 0;
		height: 50px;
		background-color: #0186c2;
	}
	.mui-bar-nav a {
		color: #fff;
	}
	
	.mui-bar-nav.mui-bar .mui-icon {
		padding-top: 12px;
	}
	
	.mui-bar .mui-title {
		line-height: 50px;
	}
	.header {
		position: fixed;
		top: 50px;
		background-color: #fff;
	}
	
	.mui-segmented-control .mui-control-item {
		color: #000;
		border-color: #fff;
	}
	
	.mui-segmented-control {
		border-color: #fff;
	}
	
	.mui-segmented-control .mui-control-item.mui-active {
		background: #fff;
		color: #0186c2;
		border-bottom: 1px solid #0186c2;
	}
	
	.mui-segmented-control .mui-control-item {
		line-height: 30px;
	}
	
	.contain {
		margin-top: 60px;
	}
	
	.mui-table-view .mui-media-object {
		line-height: 90px;
		max-width: 140px;
		height: 90px;
	}
	
	.contain p img {
		width: 14px;
	}
	
	.mui-tab-item1 {
		display: table-cell;
		overflow: hidden;
		width: 1%;
		height: 50px;
		text-align: center;
		vertical-align: middle;
		white-space: nowrap;
		text-overflow: ellipsis;
		color: #929292;
	}
	
	.mui-bar-tab .mui-tab-item1 .mui-icon {
		top: 3px;
		width: 24px;
		height: 24px;
		padding-top: 0;
		padding-bottom: 0;
	}
	
	.mui-bar-tab .mui-tab-item1 .mui-icon~.mui-tab-label {
		font-size: 11px;
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.mui-media-body i {
		font-style: normal;
		border: 1px solid #ccc;
		padding: 1px 4px;
		border-radius: 3px;
		margin-right: 4px;
	}
	
	.mui-media-body .jian {
		float: right;
		font-size: 14px;
		color: #ccc;
	}
	
	.mui-media-body .jian:before {
		content: '荐';
		background-color: #f60;
		color: #fff;
		border-radius: 50%;
		padding: 3px;
		font-size: 16px;
		margin-right: 5px;
	}
</style>